<template>
    <div>
        <!-- 头部 Navbar -->
        <van-nav-bar title="会员登陆" left-arrow @click-left="$router.go(-1)" />
        <!-- 主体 -->
        <div class="container">
            <div class="title">
                <h3>手机号登录</h3>
                <p>未登录的手机号注册后将自动登录</p>
            </div>

            <div class="form">
                <div class="form-item">
                    <input v-model="mobile" class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
                </div>
                <div class="form-item">
                    <input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
                    <img v-if="picUrl" @click="getPicCode" :src="picUrl" alt="">
                </div>
                <div class="form-item">
                    <input v-model="msgCode" class="inp" placeholder="请输入短信验证码" type="text">
                    <button @click="getCode">
                        {{ second === totalSecond ? '获取验证码' : second + '秒后重新发送' }}
                    </button>
                </div>
            </div>

            <div class="login-btn" @click="login">登录</div>

        </div>
    </div>
</template>

<script>
import { getPicCode, getMsgCode, codeLogin } from '@/api/login'

export default {
    name: 'LoginIndex',
    data () {
        return {
            picCode: '', // 用户输入的图形验证码
            picKey: '', // 将来请求传递的图形验证码唯一标识
            picUrl: '', // 存储请求渲染的图片地址
            totalSecond: 60, // 总秒数
            second: 60, // 倒计时的秒数
            timer: null,
            mobile: '',
            msgCode: ''
        }
    },
    async created () {
        this.getPicCode()
    },
    methods: {
        // 手机验证码登录
        async login () {
            if (!this.validFn()) {
                return
            }
            if (!/^\d{6}$/.test(this.msgCode)) {
                this.$toast('请输入正确的手机验证码')
                return
            }
            const res = await codeLogin(this.mobile, this.msgCode)
            this.$store.commit('user/setUserInfo', res.data)
            this.$toast('登录成功')
            // 进行判断，看地址栏有无回跳地址
            // 有    => 说明其他页面，拦截到登录来的，需要回跳
            // 没有  => 正常去首页
            const url = this.$route.query.backUrl || '/'
            this.$router.replace(url)
            // console.log(res)
        },
        // 验证手机号和验证码
        validFn () {
            if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
                this.$toast('请输入正确的手机号')
                return false
            }
            if (!/^\w{4}$/.test(this.picCode)) {
                this.$toast('请输入正确的验证码')
                return false
            }
            return true
        },
        // 获取图形验证码
        async getPicCode () {
            // const res = await request.get('/capthcha/image')
            const { data: { base64, key } } = await getPicCode()
            // console.log(res)
            this.picUrl = base64 // 存储地址
            this.picKey = key // 存储唯一标识
        },

        // 获取短信验证码
        async getCode () {
            if (!this.validFn()) {
                return
            }
            // 当前没有定时器开着，且totalSecond和second相等时，才可以倒计时
            if (!this.timer && this.second === this.totalSecond) {
                // console.log('正在倒计时')
                // 发送请求
                await getMsgCode(this.picCode, this.picKey, this.mobile)
                // console.log(res)
                this.$toast('短信发送成功，请注意查收')
                // 开启倒计时
                this.timer = setInterval(() => {
                    this.second--
                    if (this.second <= 0) {
                        clearInterval(this.timer)
                        this.timer = null // 重置定时器id
                        this.second = this.totalSecond // 归为
                    }
                }, 1000)
                this.$toast('短信验证码已发送')
            }
        }
    },
    destroyed () {
        // 离开页面，清除定时器
        clearInterval(this.timer)
    }
}
</script>

<style lang="less" scoped>

.container {
    padding: 49px 29px;

    .title {
        margin-bottom: 20px;
        h3 {
            font-size: 26px;
            font-weight: normal;
        }
        p {
            line-height: 40px;
            font-size: 14px;
            color: #b8b8b8;
        }
    }

    .form-item {
        border-bottom: 1px solid #f3f1f2;
        padding: 8px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        .inp {
            display: block;
            border: none;
            outline: none;
            height: 32px;
            font-size: 14px;
            flex: 1;
        }
        img {
            width: 94px;
            height: 31px;
        }
        button {
            height: 31px;
            border: none;
            font-size: 13px;
            color: #cea26a;
            background-color: transparent;
            padding-right: 9px;
        }
    }
}
.login-btn {
    width: 100%;
    height: 42px;
    margin-top: 39px;
    background: linear-gradient(90deg,#ecb53c,#ff9211);
    color: #fff;
    border-radius: 39px;
    // box-shadow: 0 10px 20px 0 rgb(0,0,0,.1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>